<template>
	<view>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					<text style="color: red;">*</text>姓名
				</view>
				<view class="right1">
					<view class="txt-right">
						<input placeholder="请输入姓名" maxlength="8" style="text-align: right;color: #2B2B2B;"
							v-model="trialData.name" />
					</view>
				</view>
			</view>
		</view>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					<text style="color: red;">*</text>公司名称
				</view>
				<view class="right1">
					<view class="txt-right">
						<input placeholder="请输入公司名称" maxlength="32" style="text-align: right;color: #2B2B2B;"
							v-model="trialData.company" />
					</view>
				</view>
			</view>
		</view>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					<text style="color: red;">*</text>账号
				</view>
				<view class="right1">
					<view class="txt-right">
						<input maxlength="11" placeholder="6-11位字母或数字组成" style="text-align: right;color: #2B2B2B;"
							v-model="trialData.tel" />
					</view>
				</view>
			</view>
		</view>

		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title">
				<view class="left">
					<text style="color: red;">*</text>密码
				</view>
				<view class="right1" style="flex:1">
					<view class="txt-right" style="display: flex;align-items: center;width: 100%;">
						<input class="pwd-left" style="text-align: right;width: 100%;color: #2B2B2B;"
							:password="isShowPwd" name="password" maxlength="16" placeholder="6-16位字母/数字/字符组合"
							v-model="trialData.adminPwd" />
						<view class="iconfont" style="color: #a6a6a6;"
							:class="[isShowPwd?'icon-app-yulan-close':'icon-app-yulan-open']" @click="switchIcon()">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="text">
			<view class="agreement">
				<u-checkbox-group @change="onChangeAgree">
					<u-checkbox activeColor="rgba(15, 83, 172, 1)"></u-checkbox>
				</u-checkbox-group>
				<view class="agreement-txt">提交申请即代表同意<view class="privacy" @click="togoPrivacy">《隐私保护协议》</view>
				</view>
			</view>
			<view class="">
				<button style=" height: 96rpx;line-height: 96rpx; background: rgba(15, 83, 172, 1);"
					@click="submitApply()">提交申请</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				//提交的data
				trialData: {
					name: '',
					company: '',
					tel: '',
					adminPwd: '',
				},
				isShowPwd: true,
				sec: '60', //这是重新获取验证码的倒计时(可根据需求修改)
				verifyShow: false,
				config: false,
				focus: false, //input焦点，用于键盘隐藏后重新唤起
				btnType: false,
				checked: false,
				codeType: false, //验证码的状态
			}
		},
		methods: {
			...mapMutations(["setRoleId"]),
			switchIcon() {
				this.isShowPwd = !this.isShowPwd;
			},
			isPhone(phone) {
				return
				// 开头的"1"代表第一位为数字1，"[3-9]"代表第二位可以为3、4、5、6、7、8、9其中之一，"\\d{9}"代表后面是9位数字
				const regex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				// 字符串变量的matches方法返回正则表达式对该串的检验结果，true表示符合字符串规则，false表示不符合规则
				if (regex.test(phone)) {
					return true
				} else {
					return uni.showToast({
						title: '手机号码不合法',
						icon: 'none'
					});
				}
			},
			//验证码请求
			getCode() {
				return
				let phone = this.trialData.tel
				let that = this
				if (this.isPhone(phone) === true) {
					//获取验证码的接口
					const params = {
						userAccount: phone
					}
					uni.$u.http.post(`/base/mobile/userInfo/sendSmsCode`, params).then(res => {
						if (res.code === 0) {
							//验证码发送成功进去倒计时
							that.timedown(that.sec)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				}
			},

			//倒计时
			timedown: function(num) {
				return
				let that = this;
				if (num == 0) {
					that.verifyShow = false; // 不禁用获取验证码按钮
					that.sec = 60
					return clearTimeout();
				} else {
					that.verifyShow = true; // 禁用获取验证码按钮
					setTimeout(function() {
						that.sec = num - 1
						that.timedown(num - 1);
					}, 1000); //定时每秒减一  
				}
			},

			// 键盘隐藏后设置失去焦点
			blur: function() {
				return
				var that = this
				that.focus = false
			},
			//填写验证码
			codenum: function(event) {
				return
				var that = this
				var code = event.target.value
				that.trialData.code = code
				if (this.config) {
					return
				}
				if (code.length == 6) {
					this.config = true
					//调用接口与后端code进行匹配
					let params = {
						userAccount: this.trialData.tel,
						smsCode: code,
					}
					uni.$u.http.post(`/base/mobile/userInfo/verifySmsCode`, params).then(res => {
						if (res.code === 0) {
							that.codeType = true
							that.config = false
						} else {
							event.target.value = ""
							that.config = false
							that.codeType = false
						}
					}).catch(() => {
						event.target.value = ""
						that.trialData.code = ""
						that.config = false
						that.codeType = false
					})
				}
			},
			//提交申请
			submitApply() {
				const sinfo = uni.getSystemInfoSync();
				let mobileTerminalType = 1
				if (sinfo.environment && sinfo.environment == 'wxwork') {
					mobileTerminalType = 2
				} else if (sinfo.app && sinfo.app == 'DingTalk') {
					mobileTerminalType = 3
				}
				if (!this.trialData.name) return uni.$u.toast('姓名不能为空');
				if (!this.trialData.company) return uni.$u.toast('公司名称不能为空');
				if (!this.trialData.tel) return uni.$u.toast('账号不能为空');
				if (!this.trialData.adminPwd) return uni.$u.toast('密码不能为空');
				if (!this.checked) return uni.$u.toast('请阅读并勾选以下隐私协议');
				if (!/^[a-zA-Z0-9]{6,11}$/.test(this.trialData.tel) ||
					this.trialData.adminPwd.length < 6) {
					return uni.$u.toast('请输入由数字/字母组成的6-11位账号');
				}
				if (!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&.*]+$)[a-zA-Z\d!@#$%^&.*]{6,16}$/.test(this.trialData.adminPwd) ||
					this.trialData.adminPwd.length < 6) {
					return uni.$u.toast('请输入由字母/数字/字符组成的6-16位密码');
				}
				//这里掉用接口
				let params = {
					adminName: this.trialData.name,
					companyName: this.trialData.company,
					adminPhone: this.trialData.tel,
					adminPwd: this.trialData.adminPwd,
					// trySource: 3,
					// mobileTerminalType,
					thirdId: uni.getStorageSync('thirdId')
				}
				uni.$u.http.post(`/base/mobile/companyInfo/applyTrial`, params).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						});
						this.setRoleId(0);
						uni.setStorageSync('userInfo', res.data);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/subPackagesD/login/applySuccess'
							})
						}, 500)
					}

					return
					// 逻辑更改
					uni.$u.http.get('/base/mobile/sysMenuInfo/getMobileMenuListByRole').then(res => {
						if (res.code == 0) {
							if (res.data && res.data.length >= 0) {
								uni.setStorageSync('menu', res.data);
							}
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/work/index'
								})
							}, 500)
						}
					}).catch(error => {
						uni.$u.toast(error)
					})

				}).catch((error) => {
					uni.$u.toast(`${error}`);
				})
			},
			//选择隐私协议
			onChangeAgree(e) {
				this.checked = !this.checked;
			},
			//查看隐私协议
			togoPrivacy() {
				uni.navigateTo({
					url: '/pages/subPackagesD/login/privacy'
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.tip {
		font-size: 28rpx;
		padding: 28rpx 32rpx;
		background: rgba(245, 245, 245, 1);
		color: rgba(140, 140, 140, 1);
	}

	.text {
		padding: 0 32rpx;
		margin-top: 32rpx;
		color: rgba(77, 77, 77, 1);
		font-size: 28rpx;

		.agreement {
			margin: 40rpx 0;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #2b2b2b;

			.agreement-txt {
				display: flex;
				justify-items: center;

				.privacy {
					color: #0F53AC;
				}
			}
		}

		button {
			font-size: 32rpx;
			background: #0F53AC;
			color: #fff;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 12rpx;
			font-weight: 500;
		}
	}

	.bx-list {
		background: #fff;
		border-bottom: 2rpx solid #F5F5F5;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;

			.left {
				width: 200rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: rgba(77, 77, 77, 1);
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right3 {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #8c8c8c;
				width: 250rpx;

				.txt-black {
					color: #000000;
				}

				.iconfont {
					width: 40rpx;
				}
			}

			.right2 {
				width: 150rpx;
				font-size: 28rpx;
				text-align: center;
				color: #0F53AC;
				border: 1px solid rgba(15, 83, 172, 1);
				padding: 14rpx 24rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
			}

			.right4 {
				width: 150rpx;
				font-size: 28rpx;
				text-align: center;
				background: #FFFFFF;
				opacity: 0.5;
				color: #0F53AC;
				border: 1px solid rgba(15, 83, 172, 1);
				padding: 14rpx 24rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					color: #000000;
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

		}

		.input-textrea {
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

	}

	.pwd-left {}
</style>
